<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<uni-nav-bar :border="false" left-icon="left" title="登录" background-color="#fff" @clickLeft="$nav(2,'')"></uni-nav-bar>
		</view>
		<view style="margin-left: 40rpx;font-size: 30rpx;margin-top: 30rpx;">账号登录</view>
		<view class="login_cent_sty">
			<view class="form_item">
				<u-input v-model="name"  border="bottom" placeholder="请输入手机号"  type="text"  color="black"/>
			</view>
			<view v-if="smsLoginShow == false" class="form_item">
				<u-input v-model="password"  border="bottom" placeholder="请输入密码" :clearable='false' type="password"  :password-icon="true" color="black"/>
			</view>
			
			
			
			<view v-if="smsLoginShow" class="form_item">
				<u-input type="text" placeholder="请输入验证码" v-model="captcha" :clearable='false'
					placeholder-style='color: #a5a5a5;' border="bottom">
					<template slot="suffix">
						<u-code
							ref="uCode"
							@change="codeChange"
							changeText="X秒重新获取"
						></u-code>
						<u-button
							@tap="get_code"
							:text="tips"
							type="primary"
							size="small"
							shape="circle"
						></u-button>
					</template>
				</u-input>
					
			</view>
			
			
			
			
			<view class="sub_but" @click="login">登录</view>
			<view class="flex-row items-center" style="margin: 30rpx;font-size: 28rpx;">
				
				<checkbox-group @change="onChange">
					<label>
						<checkbox :checked="isCheck" style="transform:scale(0.7)"/>登录即为同意平台
					</label>
					<label style="color: #5c8edc;" @click.stop="$nav(1,'/pages/login/agreement?id=1')">《用户协议》</label>
					<label>和</label>
					<label style="color: #5c8edc;" @click.stop="$nav(1,'/pages/login/agreement?id=2')">《隐私政策》</label>
				</checkbox-group>
				
			</view>
			
			
			<view class="text_flex">
				<view class="reg" @click="$nav(1,'/pages/login/reg')">立即注册</view>
				<view class="forget" @click="$nav(1,'/pages/login/forget')">忘记密码</view>
			</view>
		</view>
		
		
		<view class="bottom-lay">
			<view class="flex-row justify-center items-center" style="gap: 70rpx;">
				<view class="flex-col justify-center items-center" @click="quickLogin">
					<image src="/static/phone_login.png" style="width: 80rpx;height: 80rpx;margin-bottom: 20rpx;"></image> 
					<text style="font-size: 28rpx;color: #999;">快捷登录</text>
				</view>
				
				<view class="flex-col justify-center items-center" @click="smsLogin">
					<image src="/static/sms_login.png" style="width: 80rpx;height: 80rpx;margin-bottom: 20rpx;"></image> 
					<text style="font-size: 28rpx;color: #999;">短信登录</text>
				</view>
			</view>
			
		</view>
		
		
		
		<u-popup :show="show" :round="10" mode="center" @close="close">
			<view class="flex-col justify-center items-center" style="padding: 50rpx;margin-top: 30rpx;">
				<image src="/static/phone_login.png" style="width: 80rpx;height: 80rpx;"></image>
				<button style="border-radius: 40rpx;margin-top: 60rpx;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" size="mini" type="primary">手机号快捷登录</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import md5 from '../../common/md5.js'
	import util from '../../utils/index.js'
	export default {
		data() {
			return {
				name:'',
				password:'',
				passwordType:"password",
				isCheck:false,
				show:false,
				captcha: '',
				tips: '',
				smsLoginShow:false
			};
		},
		onLoad() {
			
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight
			}
		},
		methods:{
			smsLogin(){
				this.smsLoginShow = !this.smsLoginShow;
			},
			
			codeChange(text) {
				this.tips = text;
			},
			get_code(){
				if (!this.name) return this.$u.toast("请输入账号");
				if(this.$refs.uCode.canGetCode){
					this.$request({
						url: '?c=Setting&a=smsCode',
						type: 'post',
						data: {
							type: 2,
							mobile: this.name,
						}
					}).then(res => {
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							// uni.$u.toast('验证码已发送');
							this.$u.toast(res.data)
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 1000);
					})
				}else{
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			
			
			
			
			quickLogin(){
				if(!this.isCheck){
					this.$u.toast('请勾选用户协议与隐私协议')
					return;
				}
				this.show = true;
			},
			close(){
				this.show = false;
			},
			onChange(){
				this.isCheck = !this.isCheck
			},
			// userAgreement(){
			// 	console.log(111)
			// 	return;
			// 	uni.navigateTo({
			// 		url:'/pages/login/agreement?id='+1
			// 	})
			// },
			// privacyAgreement(){
			// 	uni.navigateTo({
			// 		url:'/pages/login/agreement?id='+2
			// 	})
			// },
			
			
			// 获取手机号回调
			getPhoneNumber(e) {
				console.log('获取手机号回调', e);
				
				
				if (e.detail.errMsg === "getPhoneNumber:ok") {
					// 这里获取到加密数据和初始向量，需要发送到自己的服务器解密
					const { encryptedData, iv } = e.detail;
					
					// 模拟向服务器发送请求解密手机号
					this.decryptPhoneNumber(encryptedData, iv);
				} else {
					// 用户拒绝授权或其他错误
					uni.showToast({
						title: '获取手机号失败',
						icon: 'none'
					});
				}
			},

			decryptPhoneNumber(encryptedData1, iv1){
				let that = this;
				wx.login({
					success(res){
						if(res.code){
							let data={
								encryptedData: encryptedData1,
								iv: iv1,
								type: 3,
								code:res.code
							}
							that.$request({
								url:'?c=Login&a=login',
								type:'post',
								data:data
							}).then(res =>{
								console.log(res)
								that.$u.toast('登录成功');
								that.$store.commit('setToken',res.data.token);
								that.$store.commit('setUserInfo',res.data);
								
								let token = that.$store.state.token
								
								setTimeout(() =>{
									uni.navigateBack()
								},800);
							})
						}else {
						  console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			
			login(){
				let that = this;
				
				if(this.smsLoginShow){ ///短信登录
					if (!that.name) return that.$u.toast("请输入账号");
					if (!that.captcha) return that.$u.toast("请输入验证码");
					if(!this.isCheck){
						this.$u.toast('请勾选用户协议与隐私协议');
						return;
					}
					wx.login({
					  success (res) {
					    if (res.code) {
						  console.log(res.code);	
					      let data={
					      	mobile:that.name,
					      	sms_code:that.captcha,
					      	type: 2,
							code:res.code
					      }
					      that.$request({
					      	url: '?c=Login&a=login',
					      	type: 'post',
					      	data: data
					      }).then(res => {
					      	console.log(res)
					      	that.$u.toast('登录成功');
					      	that.$store.commit('setToken',res.data.token);
					      	that.$store.commit('setUserInfo',res.data);
					      	that.$store.commit('setCartUpdate',true);
					      	let token = that.$store.state.token
					      	
					      	setTimeout(() => {
								uni.navigateBack()
					      	}, 800);
					      })
					    } else {
					      console.log('登录失败！' + res.errMsg)
					    }
					  }
					})
				}else{
					if (!that.name) return that.$u.toast("请输入账号");
					if (!that.password) return that.$u.toast("请输入密码");
					if(!this.isCheck){
						this.$u.toast('请勾选用户协议与隐私协议');
						return;
					}
					wx.login({
					  success (res) {
					    if (res.code) {
							
						  console.log(res.code);	
					      let data={
					      	mobile:that.name,
					      	password:md5.hex_md5(that.password),
					      	type: 1,
							code:res.code
					      }
					      that.$request({
					      	url: '?c=Login&a=login',
					      	type: 'post',
					      	data: data
					      }).then(res => {
					      	console.log(res)
					      	that.$u.toast('登录成功');
					      	that.$store.commit('setToken',res.data.token);
					      	that.$store.commit('setUserInfo',res.data);
					      	that.$store.commit('setCartUpdate',true);
					      	let token = that.$store.state.token
					      	
					      	// const backUrl = uni.getStorageSync("URL");
					      	// console.log('返回路径：'+backUrl);
					    
					      	setTimeout(() => {
								uni.navigateBack()
					     //  	    if (backUrl) {
					     //  	        util.redirect({
					     //  	            url: backUrl,
										// mode:'redirectTo',
					     //  	            success: () => {
					     //  	                uni.removeStorageSync("URL");
					     //  	            }
					     //  	        });
					     //  	    } else {
					     //  	        uni.reLaunch({
					     //  	            url: "/pages/index/index"
					     //  	        });
					     //  	    }
					      	}, 800);
					      	
					      	
					      })
					    } else {
					      console.log('登录失败！' + res.errMsg)
					    }
					  }
					})
				}
				
				
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
		background-color: #fff;
	}
	.text_flex{
		display: flex;
		justify-content: space-between;
		color: $u-primary;
		margin-top: 50rpx;
		gap: 20rpx;
	}
	.sub_but{
		text-align: center;
		background-color:$u-primary;
		color: #fff;
		line-height: 80rpx;
		border-radius: 50rpx;
		margin-top: 50rpx;
		margin-left: 35rpx;
		margin-right: 35rpx;
	}
	.fon_w{
		font-weight: bold;
	}
	.form_item{
		padding: 35rpx;
		// border-bottom: 1rpx solid #dddddd;
	}
	.login_cent_sty{
		// height: 40%;
		display: flex;
	    flex-direction: column;
		justify-content: center;
		align-content: center;
	}
	.forget{
		color: #333333;
		margin-right: 35rpx;
	}
	.reg{
		margin-left: 35rpx;
		color: #5c8edc;
	}
	.bottom-lay{
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		margin-bottom: 120rpx;
		text-align: center;
		background-color: #fff;
		align-items: center;
}
</style>
